import React from 'react';
import styles from './style.css'
import MyIcon from "../../component/Icon/icon";
import Cookie from 'js-cookie'

import {Tabs, WhiteSpace} from 'antd-mobile'
import MyLayout from "../layout";

const tabs = [
    {title: "all"},
    {title: "Ongoing"},
    {title: "Completed"},
]
import Map from 'lodash.map'
import Tloader from 'react-touch-loader';
import MyTabs from "../../component/MyTabs";
import All from "./all";

class Chats extends React.Component {
    constructor(props) {
        super()
        this.state = {
            hasMore: true,
            autoLoadMore: false,
            headStylesTop: 97,
            array: [1],
            user: {
                userImage: ""
            }
        }
    }


    handleLoadMore(resolve) {
        var self = this;
        // cc("handleLoadMore")
        setTimeout(() => {
            if (this.state.array.length >= 2) {
                self.setState({
                    hasMore: false,
                })
            } else {
                self.state.array.push(1)
                self.setState({
                    array: this.state.array,
                })
                if (self.state.array.length >= 2) {
                    self.setState({
                        hasMore: false,
                    })
                }
            }

            resolve()
        }, 1000)
    }

    render() {
        return <MyLayout>
            <div className={styles.chats}>
                <div className={styles.h1}>Chats</div>
                <MyTabs
                    defaultTab={"All"}
                    tabs={[
                        {title: "All", component: () => <All/>},
                        {title: "Instructors", component: () => <All/>},
                        {title: "Friends", component: () => <All/>},
                        {title: "Bots", component: () => <All/>},
                    ]}/>
            </div>
        </MyLayout>
    }
}

export default Chats